<template>
  <div class="aInfo">
    <!-- 导航栏 -->
    <navbar title="文章详情" icon="arrow-left" />
    <van-loading size="24px" vertical v-if="loading == true" color="#0088dd"
      >加载中...</van-loading
    >
    <!-- 文章内容区域 -->
    <div class="info" v-if="loading == false">
      <h3 v-html="aInfo.title"></h3>
      <!-- 头像区域-用户个人信息 -->
      <van-row :gutter="20" align="center">
        <van-col :span="5" align="right">
          <van-image
            round
            width="3.5rem"
            height="3.5rem"
            :src="aInfo.aut_photo"
          />
        </van-col>
        <van-col :span="12">
          <div v-text="aInfo.aut_name"></div>
          <div v-text="aInfo.pubdate"></div>
        </van-col>
        <van-col :span="6" align="right">
            <van-button type="danger" size="small" v-if="aInfo.is_followed == false">关注用户</van-button>
            <van-button v-else>已关注</van-button>
        </van-col>
      </van-row>

      <!-- 文章详情的基本信息 -->
      <p class="content markdown-body" v-html="aInfo.content"></p>
      <van-divider :style="{ color: '#0088dd', borderColor: '#008800' }"
        >正文结束</van-divider
      >
    </div>
    <!-- 文章内容区域 -->
    <!-- 文章评论区域 -->
    <div class="comment" v-if="loading == false">
      <van-cell>
        <div slot="title" class="c_head">全部评论</div>
      </van-cell>
      <!-- 评论的列表数据 -->
      <van-list>
        <template v-if="commentList.length > 0">
          <van-cell v-for="(item, index) in commentList" :key="index">
            <van-row :gutter="20">
              <van-col :span="3">
                <van-image
                  round
                  width="2.5rem"
                  height="2.5rem"
                  :src="item.aut_photo"
                />
              </van-col>
              <van-col :span="17">
                <div>
                  <a href="">{{ item.aut_name }}</a>
                </div>
                <div class="commnet_info">{{ item.content }}</div>
                <div>
                  <van-button size="small"
                    >回复{{ item.reply_count }}</van-button
                  >
                </div>
              </van-col>
              <van-col :span="4">
                <van-icon name="good-job-o" size="22" />
                <span>{{ item.like_count }}</span>
              </van-col>
            </van-row>
          </van-cell>
        </template>
        <template v-else>
          <van-empty
            class="custom-image"
            description="人家还没有评论呢"
          />
        </template>
      </van-list>
    </div>
    <!-- 详情底部内容 -->
    <div class="footer">
      <van-row>
        <van-col :span="15">
          <van-button plain round size="small" style="width: 200px"
            >写评论</van-button
          >
        </van-col>
        <van-col :span="3" align="center"
          ><van-icon name="comment-o" size="26" :badge="0"
        /></van-col>
        <van-col :span="3" align="center"
          ><van-icon name="star-o" size="26"
        /></van-col>
        <van-col :span="3" align="center"
          ><van-icon name="good-job-o" size="26"
        /></van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import navbar from "../common/navbar";
export default {
  name: "article_detail",
  components: {
    navbar,
  },
  data() {
    return {
      aid: 0, //文章的id值
      aInfo: {}, //文章的详情的数据
      commentList: [], //文章评论的列表数据
      loading: true,
    };
  },
  created() {
    console.log(this.$route.params);
    this.aid = this.$route.params.id; //获取文章详情的id值。

    this.getArticle(); //获取文章的数据
  },
  methods: {
    //获取文章的详情的接口数据
    async getArticle() {
      //文章的数据详情获取
      let { data } = await this.$axios.get("/v1_0/articles/" + this.aid);
      console.log(data);
      ///文章详情数据给到aInfo可以把
      this.aInfo = data;
      console.log("哥们，上面是异步请求");
      //   获取文章评论的数据信息，想用aInfo中的art_id;
      this.$axios
        .get("/v1_0/comments?type=a&source=" + this.aInfo.art_id)
        .then((res) => {
          console.log(res);
          // 赋值给评论的列表数据
          this.commentList = res.data.results;
          //效果设置false，取消加载中显示
          this.loading = false;
        });

        this.loading = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./github_markdown.css";
.aInfo {
  width: 100%;
  padding-bottom: 50px;
  /deep/ .van-loading {
    padding: 50px;
    box-sizing: border-box;
  }
  .info {
    h3 {
      padding: 10px;
      box-sizing: border-box;
    }
    .content {
      padding: 10px;
      box-sizing: border-box;
      color: #303030;
      /deep/ p {
        text-align: justify;
      }
    }
  }

  .comment {
    width: 100%;
    .c_head {
      font-size: 16px;
    }
  }

  .footer {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    position: fixed;
    bottom: 0px;
    border-top: #ddd 1px solid;
  }
}
</style>